<template>
  <div class="page-box">
      <div class="whiteback">
        <left></left>
          <div class="right">
            <transition name="el-fade-in-linear">
              <el-form class="form" v-if="show">
                <p class="sign">登录 LOGIN</p>
                <el-form-item>
                  <p style=" font-size:15px;margin: 0;font-weight: lighter">账号 Account</p>
                    <input v-model="username" class="input">
                </el-form-item>
                <el-form-item>
                  <p style="font-size:15px;margin: 0px;font-weight: lighter">密码 password</p>
                  <input v-model="password" class="input" type="password">
                </el-form-item>
                <div style="height: 45px;display: flex">
                  <p class="hoveroptions" @click="goto(enroll)">现在注册?</p>
                  <p class="hoveroptions" @click="goto(forget)">忘记密码?</p>
                </div>
                <el-form-item>
                  <div style="display: flex">
                    <button class="submit" @click="submit">登录</button>
                  </div>
                </el-form-item>
              </el-form>
            </transition>
          </div>
      </div>

  </div>
</template>
<script>
import '@/assets/adminlogin/loginmain.css'
import Left from "@/components/adminlogin/left.vue";
export default {
  name:"Login",
  components: {Left},
  data() {
    return {
      username:"",
      password:"",
      value:"",
      enroll:"enroll",
      forget:"forget",
      show:true,
      form:{},
      subform:{},
      showTop: false,
    };
  },
  methods:{
    submit(event) {
    event.preventDefault();
    if (this.username === '' || this.password === '') {
      this.$message.error("信息不完善");
      return;
    }
  
  this.form = {
    username: this.username,
    password: this.password
  };

  var that = this;
  this.$axios.post('/api/admin/login', this.form)
    .then(res => {
      if (res.data.code === 200) {
        this.$message({
          message: res.data.message,
          type: 'success'
        });
        this.$store.commit('SET_TOKEN', res.data.data);
        this.$store.commit('SET_USERNAME', this.username);
        this.$store.commit('SET_SHOW_LOGIN',true);
        this.$router.replace('/adminIndex/notice');
      } else {
        this.$message({
          message: res.data.message,
          type: 'error'
        });
      }
    })
    .catch(function (error) {
      console.log(error);
      that.$message({
        message: '网络连接错误',
        type: 'error'
      });
    });
    },
    goto(e){
      this.$router.push('/'+e);
    },
  },
  uncreated() {
    // this.show = true
  },
  mounted() {
    
  }
}
</script>
<style lang="scss" scoped>
.right{
    z-index: 0;
    width: 70%;
    height: 100%;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    opacity: 1;
    background: #FFFFFF;
    display: flex;
    justify-content: center;
    align-content: center;
}
.sign{
    /* 登录 */
    opacity: 1;
    /*font-family: Microsoft YaHei;*/
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 2.4px;
    color: #264abe;
    margin-top: 95px;
}
.form{
    width: 60%;
}
.select{
    width: 100%;
    height: 50px;
    outline:0;
    font-size: 16px;
    font-weight: lighter;
    box-sizing: border-box;
    border-width: 0px 0px 1px 0px;
    color: #6b6868;
    border-style: solid;
    padding: 0;
    &:focus {
        border-color: #264abe;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px
        rgba(0, 0, 0, 0.075),
        #264abe;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        #264abe;
    }
}

.input{
    outline-style: none;
    border: 1px solid #a4a9a9;
    width: 100%;
    height: 40px;
    /*padding: 0;*/
    margin-bottom: 20px;
    border-top: none;
    border-left: none;
    border-right: none;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: lighter;
    color: #6b6868;
    /*font-family: "Microsoft soft";*/
    &:focus {
        border-color: #264abe;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px
        rgba(0, 0, 0, 0.075),
        #264abe;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        #264abe;
    }
}
.submit{
    /*margin: 0 auto;*/
    width: 200px;
    background-color: #fff;
    color: #5B86E5;
    border: #5B86E5 2px solid;
    border-radius: 5px;
    height: 45px;
}
.options{
    position: relative;
    top: -10%;
    font-size: 12px;
    color: #c0c4cc;
}
.hoveroptions{
    position: relative;
    /*top: -25%;*/
    margin: 0px 5px;
    left: 55%;
    font-size: 14px;
    color: rgba(162, 162, 162, 0.68);
    padding: 0;
}
.hoveroptions:hover{
    color: #264abe;
    cursor: pointer;
}
.select:hover{
    cursor: pointer;
}
.submit:hover{
    cursor:pointer;

    background-color: #2d55de;
    color: #fff;
    border: #5B86E5;
}
.back{
    margin: 20px 5px;
    color: rgba(162, 162, 162, 0.68);
    font-size: 15px;
}
.back:hover{
    color: #264abe;
    cursor:pointer;
}
</style>